<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#wrap {
				margin: 100px auto;
				width: 850px;
			}
			
			#wrap li {
				list-style: none;
				width: 160px;
				height: 320px;
				float: left;
				overflow: hidden;
				border-left: 2px solid rgba(255, 255, 255, .8);
				box-shadow:0px 0px 20px rgba(0,0,0,0.8);
				transition: 1s;
			}
			
			#wrap ul:hover li {
				
					width: 40px;
					-webkit-filter: grayscale(.8);
					filter: grayscale(.8);
				}
				#wrap ul li:hover {
					width: 640px;
					-webkit-filter: grayscale(0) hue-rotate(300deg);
					filter: grayscale(0) hue-rotate(300deg);
				}
			}
		</style>
	</head>

	<body>
		<div id="wrap">
			<ul class="roll">
				<li>
					<img src="img1.jpg" />
				</li>
				<li>
					<img src="img2.jpg" />
				</li>
				<li>
					<img src="img3.jpg" />
				</li>
				<li>
					<img src="img4.jpg" />
				</li>
				<li>
					<img src="img5.jpg" />
				</li>
			</ul>
		</div>
	</body>

	<script type="text/javascript">
	</script>

</html>